<template>
  <div class="modal-container">
    <div v-if="messageModalOption.visible" class="modal-content">
      <div class="modal-header">
        <a-icon-font type="iconwuquanxian"/>
        {{messageModalOption.message}}
        <a-icon-font type="iconicon-beifen1" class="close-icon" @click="cancel"/>
      </div>
      <div class="modal-body">
        <div v-for="(tip,index) in getTips" :key="index" class="tip">
          <div v-if="tip">
            {{tip}}
            <br>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import DataStore from '@/store/modules/data'

@Component
export default class MessageModal extends Vue{

  public get messageModalOption(){
    return DataStore.messageModalOption
  }

  public get getTips() {
    return this.messageModalOption.tips.split('\n')
  }

  public cancel() {
    DataStore.setMessageModalOption({visible:false,message:'',tips:''})
  }
}
</script>

<style lang="less" scoped>
.modal-container {
  position: fixed;
  text-align: center;
  top: 100px;
  width: 100%;
}

.modal-header {
  font-weight: bold;
  position: relative;
}

.close-icon {
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}

.modal-content {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: inline-block;
  left: calc(50% - 260px);
  padding: 10px 12px;
  text-align: left;
  width: 520px;
}

.modal-body {
  padding-left: 20px;
}

.tip {
  margin-top: 5px;
  overflow-wrap: break-word;
}
</style>
